<template>
    <div>
        <el-container style="background: #F8F8F8">
            <el-header height="500">
                <!--头部-->
                <div class="head-top">
                    <div class="head-top-button-style">
                        <router-link to="/">
                            <el-button class="button-left" type="text" size="small" style="margin-left: 20px">网站首页</el-button>
                        </router-link>
                        &nbsp;
                        <router-link :to="`/home/headhuntingCompany/${0}`">
                            <el-button type="text" size="small">
                                搜职位
                            </el-button>
                        </router-link>

                        <router-link :to="`/home/headhuntingCompany/${1}`">
                            <el-button type="text" size="small" style="display: inline-block;margin-left: 10px">
                               找工作
                            </el-button>
                        </router-link>

                        <div v-if="userObj!=null" style="display: inline-block;margin-left: 850px;font-size: 12px;line-height: 1">
                            <span style="color: red">你好：{{this.userObj.username}}</span>
                            <el-button style="margin-left: 10px" type="text" size="small" @click="logout()">退出登录</el-button>
                        </div>

                        <div style="display: inline-block" v-else>
                            <el-dropdown style="margin-left: 850px;">
                          <span class="el-dropdown-link  button-right">
                            <i class="el-icon-arrow-down el-icon--right"></i>
                            <span style="font-size: 12px;font-family:Arial">登录</span>
                          </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <router-link to="/home/loginJob">求职者登录</router-link>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <router-link to="/home/loginCompany">企业登录</router-link>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                            <el-dropdown>
                          <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon--right"></i>
                            <span style="font-size: 12px;font-family:Arial ">注册</span>
                          </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <router-link to="/home/registerJob">求职者注册</router-link>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <router-link to="/home/registerCompany">企业注册</router-link>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>

                        <el-button style="margin-left: 10px" type="text" size="small" @click="isAuthInto()">个人中心</el-button>
                        <el-button style="margin-left: 10px" type="text" size="small">使用帮助</el-button>
                        <el-button type="text" size="small">网站导航</el-button>
                    </div>
                </div>
            </el-header>
        </el-container>
    </div>
</template>

<script>
    // import MainHeaderSeacher from './main-header-seacher'

    import userApi from "@/api/user";
    import cookie from 'js-cookie'
    export default {
        inject:['reload'],
        name: "main-header",
        data(){
            return{
                userObj:{},

                selectInfo:[],
                inputContent:'',

            }
        },
        created() {
            this.userObj = JSON.parse(localStorage.getItem('user'))
        },
        mounted() {

        },
        methods:{
            //退出登录的方法
            logout(){
                userApi.logout().then(response =>{
                    if (response.data.code === 0){
                        this.$message({
                            type:'success',
                            message:'退出登录',
                            duration: 5 *1000
                        })
                        //退出登录清除cookie
                        cookie.remove('client_token')
                        //退出登录清除localStorage
                        localStorage.clear()
                        //退出成功，回到Home页面
                        this.$router.push("/home")
                        this.reload()
                    }
                })
                .catch(err => {
                    Promise.reject(err)
                })
            },


            //判断是否有权限进入个人中心管理页面
            isAuthInto(){
                const token = this.$cookie.get('client_token')
                if (!token){
                    this.$message({
                        type:'warning',
                        message:'您好，请先登录'
                    })
                    return
                }

                const userStr = localStorage.getItem('user')
                const user = JSON.parse(userStr)
                const userId = user.userId

                userApi.loadUserBelongRole(userId)
                .then(data => {
                    if (data.data.code === 0){
                        const roleId = data.data.data.roleId
                        if (roleId === 2){
                            this.$router.push("/home/personCenter/myDeliverInfo")
                        }
                        if (roleId === 3){
                            this.$router.push("/home/companyCenter/companyCreateInfo")
                        }
                    }
                })
                .catch(error =>{
                    Promise.reject(error)
                })
            }
        }
        // components:{
        //     MainHeaderSeacher
        // }
    }
</script>

<style scoped>
    /*head-top*/
    .head-top{
        width: 1360px;
        height: 30px;
        line-height: 30px;
        background: #F8F8F8;
        margin: 0 auto;
    }
    /*修改按钮的默认颜色*/
    .el-button--text{
        color: #333333;
    }

</style>
